<template>
    <div id="roll-call-line">
        <RollCallItem/>
        <RollCallItem/>
        <RollCallItem/>
        <RollCallItem/>
        <RollCallItem/>
    </div>
</template>

<script>
    import RollCallItem from "./item/RollCallItem";

    export default {
        props: {
            names: {
                type: Array,
                required: true,
                validator: () => {
                    if (this.names.length > 5) {
                        throw "一个roll-call-line组件只能展示六个名字";
                    }

                }
            }
        },
        name: "RollCallList",
        components: {
            RollCallItem
        }
    }
</script>

<style scoped>
    #roll-call-line {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #roll-call-line .active {
        width: 90px;
        height: 22px;
        color: rgba(255, 255, 255, 1);
        font-size: 15px;
        line-height: 150%;
        text-align: center;
        background-color: #D43030;
        border-radius: 90px;
    }
</style>
